<template>
    <div class="newsinfo-container">
        <!-- 大标题 -->
       <h3 class="title">{{ newsinfo.title }}</h3> 
       <!-- 子标题 -->
       <p class="subtitle">
           <span>发表时间：{{ newsinfo.add_time }}</span>
           <span>点击：{{ newsinfo.click }}次</span>
       </p>
       <hr>
       <!-- 内容区域 -->
       <div class="content" v-html="newsinfo.content"></div>
       <!-- 评论区域 -->
       <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

// 导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    data() {
        return {
            id: this.$route.params.id,           // 将URL中的ID参数值挂在到data上
            newsinfo: {   
                id: this.$route.params.id,
                title: '巴黎圣母院惨遭火灾，有人痛心祈祷，有人却骂“活该”？',
                add_time: "2019-04-16 00:00:00",
                click: 5,
                img_url: "https://inews.gtimg.com/newsapp_match/0/8580355543/0",
                content: '<h4>我是新闻内容</h4>',
            }
        }
    },
    methods: {
        // 获取新闻详情数据
        getNewsInfo(){
            console.log("获取新闻详情数据")
            // this.$http.get().then(result => {
            //     // if (result.body.status === 0){
            //     //     console.log('OK')
            //     // } else{
            //     //     Toast("获取新闻详情数据失败!")
            //     // }
            // })
        }
    },
    created() {
        this.getNewsInfo()
    },
    components: {
        // 注册子组件
        'comment-box': comment
    }
}
</script>


<style lang="scss">
    .newsinfo-container{
        padding: 0 4px;
        .title{
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
            color: red;
        }
        .subtitle{
            font-size: 13px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
        .content{
            img{
                width: 100%;
            }
        }
    }
</style>
